<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>login</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <script th:src="@{/js/jquery-3.3.1.js}" type="text/javascript"></script>
    <script th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script>

    <style>
        .container{
            border: 2px solid #DDDDDD;
            border-radius: 5px;
            width: 500px;
            margin-top: 10%;
        }
        #t{
            border: 2px solid #DDDDDD;
            border-radius: 5px;
        }

        #t li{
            margin-top: 15px;
        }
        #t1{
            border: 2px solid #DDDDDD;
            border-radius: 5px;
        }

        #t1 li{
            margin-top: 15px;
        }

        .btn-block{
            margin-bottom: 15px;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-6 column">
            <hr/>
            <h5 class="text-center text-success">
                合金代号：<span th:text="${cd.code}">暂无数据</span>
            </h5>
            <h5 class="text-center text-success">
                合金牌号：<span th:text="${cd.mark}">暂无数据</span>
            </h5>
            <hr/>
            <ul id="t">
                <li>
                    固相温度：<span th:text="${cd.ts}">暂无数据</span>
                </li>
                <li>
                    液相温度：<span th:text="${cd.tl}">暂无数据</span>
                </li>
                <li>
                    浇铸温度：<span th:text="${cd.tp}">暂无数据</span>
                </li>

            </ul>
            <hr/>
            <a th:href="'/materials/findCastingInformationByName?code='+${cd.code}"  class="btn btn-block btn-lg btn-primary">其他信息</a>

        </div>
        <div class="col-md-6 column text-center">
            <hr/>
            <div class="btn-group">
                <button class="btn btn-default">铸造方式</button> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li th:each="CastingMethod:${cd.castingMethods}" class="castingMethod">
                        <a th:text="${CastingMethod}" href="#">暂无数据</a>
                    </li>

                </ul>
            </div>
            <hr/>
            <div class="tabbable" id="tabs-446850">
                <ul class="nav nav-tabs">
                    <li th:each="castingDistinguish,memberStat:${cd.castingDistinguishs}">
                        <a th:href="'#panel-' + ${memberStat.index + 1}" data-toggle="tab" th:text="${castingDistinguish.heat_treatment}">Section 2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div  th:each="castingDistinguish,memberStat:${cd.castingDistinguishs}" class="tab-pane text-left" th:id="'panel-' + ${memberStat.index + 1}">

                            <p>
                                    抗拉强度：<span th:text="${castingDistinguish.tensile_strength}">暂无数据</span>
                            </p>
                            <p>
                                    断后伸长率：<span th:text="${castingDistinguish.elongation_percentage}">暂无数据</span>
                            </p>
                            <p>
                                    硬度：<span th:text="${castingDistinguish.hardness}">暂无数据</span>
                            </p>



                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function(){
        $(".castingMethod").on("click",function(){
            var text = $(this).find("a").text();
            var code = $("h5").eq(0).find("span").text();
            $.ajax({
                url:"/materials/findCastingDistinguishByCodeAndCastingMethod",
                data:{
                    code:code,
                    castingMethod:text
                },
                dataType:"json",
                type:"get",
                success:function(result){
                    //清除
                    $(".tabbable ul").empty();
                    $(".tabbable .tab-content").empty();
                    //追加
                    var ul = $(".tabbable ul");
                    var div = $(".tabbable .tab-content");

                    $.each(result, function(i,val){
                        ul.append("<li><a href='#panel-"+(i+1)+"' data-toggle='tab'>"+val.heat_treatment+"</a></li>");
                    });

                    $.each(result, function(i,val){
                        div.append("<div class='tab-pane text-left' id='panel-"+(i+1)+"'>" +
                            "                            <p>\n" +
                            "                                    抗拉强度：<span >"+val.tensile_strength+"</span>\n" +
                            "                            </p>\n" +
                            "                            <p>\n" +
                            "                                    断后伸长率：<span >"+val.elongation_percentage+"</span>\n" +
                            "                            </p>\n" +
                            "                            <p>\n" +
                            "                                    硬度：<span >"+val.hardness+"</span>\n" +
                            "                            </p>\n" +
                            "                    </div>");
                    });

                }
            })
        })
    });
</script>
</body>
</html>